<template>
    <div class="commission-table-page">
       <div class="table-card" v-for="(item,index) in newTableData" :key="index">
           <div class="title">{{item.title}}</div>
           <div class="create-table" >
               <div class="creat-table-th">
                   <div class="creat-table-td">价格区间</div>
                   <div class="creat-table-td" style="color: red;" >佣金</div>
               </div>
               <div class="creat-table-tr" v-for="(cell,cellIndex) in item.data" :key="cellIndex">
                   <div class="creat-table-td">{{cell.title}}</div>
                   <div class="creat-table-td" style="color: red;">{{cell.commission}}</div>
               </div>
           </div>
       </div>
    </div>

</template>
<script>
import {apiGetPercentageStandard} from '../../request/api'
    export default {
        data(){
            return {
                tableData: [{
                    type: 'tb',
                    id: 1,
                    title: '淘宝',
                    data: []
                },{
                    type: 'tm',
                    id: 2,
                    title: '天猫',
                    data: []
                },{
                    type: 'jd',
                    id: 3,
                    title: '京东',
                    data: []
                },{
                    type: 'albb',
                    id: 4,
                    title: '1688',
                    data: []
                },{
                    type: 'wph',
                    id: 13,
                    title: '唯品会',
                    data: []
                },{
                    type: 'pdd',
                    id: 15,
                    title: '拼多多',
                    data: []
                },{
                  type: 'tiktok',
                  id: 20,
                  title: '抖音',
                  data: []
                }],
                newTableData: [],
                percentageType: ''
            }
        },
        created () {
            this.getTableData()
        },
        methods:{
            getTableData(){
                apiGetPercentageStandard({
                    token: window.sessionStorage.getItem("token")
                }).then(res =>{
                    if(res.msg.shop_show_type){
                      if (res.msg.shop_show_type == 20){
                        this.newTableData.push(this.tableData[6])
                      }else {
                        for(var i in this.tableData){
                          if(res.msg.shop_show_type.indexOf(this.tableData[i].id.toString()) >=0) {
                            this.newTableData.push(this.tableData[i])
                          }
                        }
                      }
                    } else {
                      this.newTableData = this.tableData
                    }
                    for(var i in res.msg){
                         for(var j in this.newTableData){
                             if(i == this.newTableData[j].type) {
                                 this.newTableData[j].data = res.msg[i]
                             }
                        }
                    }
                }).catch(res => {

                })
            }
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
.commission-table-page {
    .table-card {
        .title {
           color: red;
           font-size: 18px;
           margin-bottom: 20px;
           margin-top: 20px;
        }
        .create-table {
             width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            flex-direction: row;
            text-align: center;
            font-size: 14px;
            .creat-table-td {
                flex-basis: 100px;
              -webkit-flex-basis: 100px;
              height: 40px;
              line-height: 40px;
              border:1px solid #ebeef5;
            }
            .creat-table-th {
                background: #f5f5f5;
                .creat-table-td {
                     padding: 0px 10px;
                }
            }
            .creat-table-tr {
                .creat-table-td {
                     padding: 0px 10px;

                }
            }
        }
    }
}
</style>
